<template>
	<view class="container">
		<!-- 顶部装饰 -->
		<view class="top-decoration">
			<view class="hearts">
				<view class="heart" v-for="i in 5" :key="i"></view>
			</view>
		</view>

		<!-- 主要内容区 -->
		<view class="main-content">
			<view class="garden-title">
				<text class="title">💕 爱情花园 💕</text>
				<text class="subtitle">种下爱的种子，收获甜蜜果实</text>
			</view>

			<!-- 花园区域 -->
			<view class="garden-area">
				<view class="flower-grid">
					<view 
						class="flower-plot" 
						v-for="(flower, index) in flowers" 
						:key="index"
						@click="waterFlower(index)"
					>
						<view class="flower" :class="[flower.status]">
							<view class="stem"></view>
							<view class="bloom"></view>
						</view>
						<view class="love-value">❤️ {{flower.loveValue}}</view>
					</view>
				</view>
			</view>

			<!-- 工具栏 -->
			<view class="toolbar">
				<view class="tool-item" @click="plantNewFlower">
					<text class="tool-icon">🌱</text>
					<text class="tool-text">种植</text>
				</view>
				<view class="tool-item" @click="waterAll">
					<text class="tool-icon">💧</text>
					<text class="tool-text">浇水</text>
				</view>
				<view class="tool-item" @click="harvestAll">
					<text class="tool-icon">🌺</text>
					<text class="tool-text">收获</text>
				</view>
			</view>
		</view>

		<!-- 特效层 -->
		<view class="effects-layer">
			<view class="sparkles"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			flowers: Array(9).fill().map(() => ({
				status: 'seed',
				loveValue: 0,
				growthStage: 0,
				lastWatered: null
			}))
		}
	},
	methods: {
		waterFlower(index) {
			const flower = this.flowers[index];
			if (flower.status === 'empty') return;
			
			flower.loveValue += 10;
			flower.lastWatered = new Date();
			
			// 更新生长阶段
			if (flower.growthStage < 3) {
				flower.growthStage++;
				switch(flower.growthStage) {
					case 1:
						flower.status = 'sprout';
						break;
					case 2:
						flower.status = 'growing';
						break;
					case 3:
						flower.status = 'blooming';
						break;
				}
			}
			
			// 添加浇水动画效果
			this.showWaterEffect(index);
		},
		
		plantNewFlower() {
			const emptyPlot = this.flowers.findIndex(f => f.status === 'empty');
			if (emptyPlot !== -1) {
				this.flowers[emptyPlot] = {
					status: 'seed',
					loveValue: 0,
					growthStage: 0,
					lastWatered: null
				};
			} else {
				uni.showToast({
					title: '花园已满，请先收获一些花朵',
					icon: 'none'
				});
			}
		},
		
		waterAll() {
			this.flowers.forEach((flower, index) => {
				if (flower.status !== 'empty') {
					this.waterFlower(index);
				}
			});
		},
		
		harvestAll() {
			let harvestedCount = 0;
			this.flowers.forEach((flower, index) => {
				if (flower.status === 'blooming') {
					harvestedCount++;
					this.flowers[index] = {
						status: 'empty',
						loveValue: 0,
						growthStage: 0,
						lastWatered: null
					};
				}
			});
			
			if (harvestedCount > 0) {
				uni.showToast({
					title: `收获了 ${harvestedCount} 朵爱心花`,
					icon: 'success'
				});
			}
		},
		
		showWaterEffect(index) {
			// 这里可以添加浇水的动画效果
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background: linear-gradient(180deg, #FFE4E1 0%, #FFF0F5 100%);
	padding: 40rpx;
	position: relative;
}

.top-decoration {
	height: 200rpx;
	position: relative;
	overflow: hidden;
}

.hearts {
	position: absolute;
	width: 100%;
	height: 100%;
}

.heart {
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	background: #FF69B4;
	transform: rotate(45deg);
	animation: float 4s infinite ease-in-out;
}

.heart::before,
.heart::after {
	content: '';
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	background: #FF69B4;
	border-radius: 50%;
}

.heart::before {
	left: -20rpx;
}

.heart::after {
	top: -20rpx;
}

.garden-title {
	text-align: center;
	margin-bottom: 60rpx;
}

.title {
	font-size: 48rpx;
	color: #FF1493;
	font-weight: bold;
	text-shadow: 0 2rpx 4rpx rgba(255,20,147,0.2);
}

.subtitle {
	font-size: 28rpx;
	color: #DB7093;
	margin-top: 20rpx;
	display: block;
}

.garden-area {
	background: rgba(255,255,255,0.9);
	border-radius: 24rpx;
	padding: 40rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 8rpx 24rpx rgba(255,182,193,0.2);
}

.flower-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40rpx;
}

.flower-plot {
	aspect-ratio: 1;
	background: #FFF5EE;
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	transition: all 0.3s ease;
}

.flower-plot:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 4rpx 12rpx rgba(255,182,193,0.3);
}

.flower {
	width: 60rpx;
	height: 120rpx;
	position: relative;
}

.stem {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 6rpx;
	height: 80rpx;
	background: #90EE90;
	transform: translateX(-50%);
}

.bloom {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background: #FF69B4;
	transition: all 0.3s ease;
}

.love-value {
	font-size: 24rpx;
	color: #FF69B4;
	margin-top: 20rpx;
}

.toolbar {
	display: flex;
	justify-content: space-around;
	padding: 40rpx;
	background: rgba(255,255,255,0.9);
	border-radius: 24rpx;
	box-shadow: 0 8rpx 24rpx rgba(255,182,193,0.2);
}

.tool-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.tool-item:hover {
	transform: scale(1.1);
}

.tool-icon {
	font-size: 48rpx;
	margin-bottom: 10rpx;
}

.tool-text {
	font-size: 24rpx;
	color: #DB7093;
}

/* 花朵状态样式 */
.seed .bloom {
	transform: translateX(-50%) scale(0.5);
	background: #FFB6C1;
}

.sprout .bloom {
	transform: translateX(-50%) scale(0.7);
	background: #FF69B4;
}

.growing .bloom {
	transform: translateX(-50%) scale(0.9);
	background: #FF1493;
}

.blooming .bloom {
	transform: translateX(-50%) scale(1);
	background: #FF1493;
	box-shadow: 0 0 20rpx rgba(255,20,147,0.4);
}

@keyframes float {
	0%, 100% {
		transform: translateY(0) rotate(45deg);
	}
	50% {
		transform: translateY(-20rpx) rotate(45deg);
	}
}

.effects-layer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 100;
}

.sparkles {
	width: 100%;
	height: 100%;
}
</style>